const app = new Vue({
    el: '#app',
    data: {
        text_register: 'Register',
        showInput: false,
        showGround1: true,
        shownotice: false,
        showgame_board: false,
        isInputFilled: false,   
        wti_click_ball: false,
        showwarning: false,
        wti_win: false,
        colorb: [1, 1, 1, 0, 0, 0, 0, 2, 2, 2],
        showb: [true, true, true, false, false, false, false, true, true, true],
        select_id: 'b0',
        timer: null,
        seconds: 0,
        showTimer: false,
        isTimerRunning: false,
        isFirstInput: true,
        showWinPopup: false,
        winTime: '',
        showGuide: false,
        showRank: false,
        rankList: [],
        rankList: [
        ]
    },
    methods: {
        startTimer() {
            if (!this.isTimerRunning) {
                this.isTimerRunning = true;
                this.timer = setInterval(() => {
                    this.seconds++;
                }, 1000);
            }
        },
        stopTimer() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
                this.isTimerRunning = false;
            }
        },
        formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
        },
        fn_register() {
            this.showInput = !this.showInput;
            if (this.showInput) {
                this.$nextTick(() => {
                    document.querySelector('.register_box input').focus();
                });
            }
        },
        fn_start() {
            if (this.text_register && this.isInputFilled) {
                this.showInput = false;
                this.showGuide = true;
            } else {
                this.fn_restart();
            }
        },
        fn_music: function (event) {
            let audio = this.$refs.backgroundMusic;
            if (audio.paused) {
                audio.play();
                event.target.style.animationPlayState = 'running';
            } else {
                audio.pause();
                event.target.style.animationPlayState = 'paused';
            }
        },
        onBlur(event) {
            const value = event.target.value;
            if (!value || /^\s*$/.test(value)) {
                this.showInput = false;
                this.showwarning = true;
            } else {
                this.text_register = value;
                this.isInputFilled = true;
                this.showInput = false;
                this.showwarning = false;
            }
        },
        fn_hover: function (event) {
            event.target.classList.add('bounce-now');
            setTimeout(function () {
                event.target.classList.remove('bounce-now');
            }, 500);
        },
        fn_click_ball: function (event) {
            if (!this.wti_click_ball) {
                event.target.style.opacity = '1';
                this.select_id = parseInt(event.target.id.replace(/[^0-9]/g, ''), 10);
                let parent = event.target.parentElement;
                let rect = parent.querySelector('rect');
                const computedStyle = window.getComputedStyle(rect);
                const currentOffset = computedStyle.getPropertyValue('stroke-dashoffset');
                if (currentOffset.trim() === '800px') {
                    rect.style.strokeDasharray = '400px';
                    rect.style.strokeDashoffset = '0';
                } else {
                    rect.style.strokeDasharray = '400px';
                    rect.style.strokeDashoffset = '800';
                }
                this.wti_click_ball = true;
                if (!this.isTimerRunning && this.showTimer) {
                    this.startTimer();
                }
            } else {
                if (window.getComputedStyle(event.target).opacity === '1') {
                    event.target.style.opacity = '0.5';
                    this.wti_click_ball = false;
                }
                let parent = event.target.parentElement;
                let rect = parent.querySelector('rect');
                const computedStyle = window.getComputedStyle(rect);
                const currentOffset = computedStyle.getPropertyValue('stroke-dashoffset');
                if (currentOffset.trim() === '800px') {
                    rect.style.strokeDasharray = '400px';
                    rect.style.strokeDashoffset = '0';
                } else {
                    rect.style.strokeDasharray = '400px';
                    rect.style.strokeDashoffset = '800';
                }
            }
        },
        fn_check: function () {
            this.wti_win = true;
            for (let index = 0; index <= 2; ++index) {
                if (this.colorb[index] != 2 || this.colorb[9 - index] != 1) {
                    this.wti_win = false;
                    break;
                }
            }
            if (this.wti_win) {
                this.stopTimer();
                this.winTime = this.formatTime(this.seconds);
                this.showWinPopup = true;
                this.rankList.push({
                    name: this.text_register,
                    time: this.winTime
                });
                this.rankList.sort((a, b) => {
                    const [am, as] = a.time.split(':').map(Number);
                    const [bm, bs] = b.time.split(':').map(Number);
                    return am * 60 + as - (bm * 60 + bs);
                });
            }
        },
        fn_click_right: function (event) {
            let ballElement = event.currentTarget.querySelector('.ball');
            if (this.wti_click_ball && ballElement.style.backgroundColor === 'transparent') {
                let second_id = parseInt(ballElement.id.replace(/[^0-9]/g, ''), 10);
                let begin_index = Math.min(this.select_id, second_id);
                let end_index = Math.max(second_id, this.select_id);
                let wti_move = true;
                if (begin_index == 3 && end_index == 4) {
                    if (this.showb[1]) {
                        wti_move = false;
                    }
                }
                if (begin_index == 7 && end_index == 8) {
                    if (this.showb[4]) {
                        wti_move = false;
                    }
                    if (this.showb[5]) {
                        wti_move = false;
                    }
                    if (this.showb[8]) {
                        wti_move = false;
                    }
                }
                for (let index = begin_index + 1; index < end_index; ++index) {
                    if (begin_index < 3 && index == 3) {
                        continue;
                    }
                    if (begin_index == 3 && index == 4) {
                        if (this.showb[1]) {
                            wti_move = false;
                            break;
                        }
                    }
                    if (begin_index == 7 && index == 8) {
                        if (this.showb[4]) {
                            wti_move = false;
                            break;
                        }
                        if (this.showb[5]) {
                            wti_move = false;
                            break;
                        }
                    }
                    if (end_index == 7 && index == 6) {
                        break;
                    }
                    if (end_index > 7 && index == 7) {
                        continue;
                    }
                    if (end_index == 8 && index == 6) {
                        if (this.showb[8]) {
                            wti_move = false;
                            break;
                        }
                    }
                    if (end_index > 8 && index == 8) {
                        continue;
                    }
                    if (this.showb[index - 1]) {
                        wti_move = false;
                        break;
                    }
                }
                if (wti_move) {
                    Vue.set(this.showb, this.select_id - 1, !this.showb[this.select_id - 1]);
                    Vue.set(this.showb, second_id - 1, !this.showb[second_id - 1]);
                    Vue.set(this.colorb, second_id - 1, this.colorb[this.select_id - 1]);
                    Vue.set(this.colorb, this.select_id - 1, 0);
                    this.fn_check();
                }
                this.$nextTick(() => {
                    document.querySelector('#b' + this.select_id).style.opacity = '0.5';
                });
                this.wti_click_ball = false;
            } else if (this.wti_click_ball) {
                document.querySelector('#b' + this.select_id).style.opacity = '0.5';
                let second_id = parseInt(ballElement.id.replace(/[^0-9]/g, ''), 10);
                document.querySelector('#b' + second_id).style.opacity = '1';
                this.select_id = second_id;
            }
        },
        editUserId() {
            this.showInput = true;
            this.$nextTick(() => {
                const input = document.querySelector('.user_timer_container input');
                if (input) {
                    input.value = '';
                    input.focus();
                }
            });
        },
        fn_restart() {
            this.seconds = 0;
            this.stopTimer();
            // this.showTimer = false;
            this.isTimerRunning = false;
            this.wti_click_ball = false;
            this.wti_win = false;
            // this.showGround1 = true;
            // this.showgame_board = false;
            this.colorb = [1, 1, 1, 0, 0, 0, 0, 2, 2, 2];
            this.showb = [true, true, true, false, false, false, false, true, true, true];
            this.select_id = 'b0';
            this.showWinPopup = false;
        },
        fn_gameReset() {
            // 只重置游戏相关状态，不影响注册和用户名
            this.seconds = 0;
            this.stopTimer();
            this.showTimer = true;
            this.isTimerRunning = false;
            this.wti_click_ball = false;
            this.wti_win = false;
            this.showGround1 = false;
            this.showgame_board = true;
            this.colorb = [1, 1, 1, 0, 0, 0, 0, 2, 2, 2];
            this.showb = [true, true, true, false, false, false, false, true, true, true];
            this.select_id = 'b0';
            this.showWinPopup = false;
        },
        closeGuide() {
            this.showGuide = false;
            this.showTimer = true;
            this.seconds = 0;
            this.showGround1 = false;
            this.showgame_board = true;
        }
    }
})